<template>
  <div class="shelf-search-wrapper" :class="{'search-top': ifInputClicked, 'hide-shadow': ifHideShadow}">
    <div class="shelf-search" :class="{'search-top': ifInputClicked}">
      <div class="search-wrapper">
        <div class="icon-search-wrapper">
          <span class="iconfont icon">&#xe688;</span>
        </div>
        <div class="search-input-wrapper">
          <input class="search-input"
                 type="text"
                 :placeholder="$t('shelf.search')"
                 v-model="searchText"
                 @click="onSearchClick">
        </div>
        <div class="icon-clear-wrapper"
             v-show="searchText.length > 0"
             @click="clearSearchText">
          <span class="iconfont">&#xe725;</span>
        </div>
      </div>
      <div class="icon-locale-wrapper" v-if="!ifInputClicked" @click="switchLocale">
        <span class="iconfont icon" v-if="lang === 'cn'">&#xe602;</span>
        <span class="iconfont icon" v-else>&#xe60b;</span>
      </div>
      <div class="cancel-btn-wrapper" @click="onCancelClick" v-else>
        <span class="cancel-text">{{$t('shelf.cancel')}}</span>
      </div>
    </div>
    <transition
      enter-active-class="animated slideInUp"
      leave-active-class="animated slideOutDown">
      <div class="shelf-search-tab-wrapper" v-if="ifInputClicked">
        <div class="shelf-search-tab-item" v-for="item in tabs" :key="item.id" @click="onTabClick(item.id)">
          <span class="shelf-search-tab-text" :class="{'is-selected': item.id === selectedTab}">{{item.text}}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { setLocalStorage } from '../../utils/localStroage'
import { storeShelfMixin } from '../../utils/mixin'

export default {
  name: 'ShelfSearch',
  mixins: [storeShelfMixin],
  computed: {
    lang () {
      return this.$i18n.locale
    },
    tabs () {
      return [
        {
          id: 1,
          text: this.$t('shelf.default')
        },
        {
          id: 2,
          text: this.$t('shelf.progress')
        },
        {
          id: 3,
          text: this.$t('shelf.purchase')
        }
      ]
    }
  },
  watch: {
    offsetY (offsetY) {
      if (offsetY > 0 && this.ifInputClicked) {
        this.ifHideShadow = false // 显示阴影
      } else {
        this.ifHideShadow = true // 隐藏阴影
      }
    }
  },
  data () {
    return {
      ifInputClicked: false,
      searchText: '',
      selectedTab: 1,
      ifHideShadow: true
    }
  },
  methods: {
    onSearchClick () {
      this.ifInputClicked = true
      this.setShelfTitleVisible(false)
    },
    onCancelClick () {
      this.ifInputClicked = false
      this.setShelfTitleVisible(true)
    },
    switchLocale () {
      if (this.lang === 'en') {
        this.$i18n.locale = 'cn'
      } else {
        this.$i18n.locale = 'en'
      }
      setLocalStorage('locale', this.$i18n.locale)
    },
    clearSearchText () {
      this.searchText = ''
    },
    onTabClick (id) {
      this.selectedTab = id
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .shelf-search-wrapper
    position: absolute
    z-index: 105
    width: 100%
    height: px2rem(94)
    font-size: px2rem(16)
    background: white
    box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, .1)
    &.search-top
      // 点击搜索区改变其布局，使其不与滚动一起滚动
      position: fixed
      left: 0
      top: 0
    &.hide-shadow
      box-shadow: none
    .shelf-search
      position: absolute
      top: px2rem(42)
      z-index: 105
      left: 0
      display: flex
      width: 100%
      height: px2rem(52)
      transition: top $animationTime linear
      &.search-top
        top: 0
      .search-wrapper
        flex: 1
        display: flex
        margin: px2rem(8) 0 px2rem(8) px2rem(10)
        border: px2rem(1) solid #ccc
        border-radius: px2rem(3)
        .icon-search-wrapper
          flex: 0 0 px2rem(22)
          rightStyle()
          .iconfont
            font-size: px2rem(12)
        .search-input-wrapper
          flex: 1
          padding: 0 px2rem(10)
          box-sizing: border-box
          center()
          .search-input
            width: 100%
            font-size: px2rem(14)
            border: none
            color: #333
            &:focus
              outline: none
            &::-webkit-input-placeholder
              font-size: px2rem(14)
              color: #ccc
        .icon-clear-wrapper
          flex: 0 0 px2rem(24)
          leftStyle()
          .iconfont
            font-size: px2rem(14)
            color: #ccc
      .icon-locale-wrapper
        flex: 0 0 px2rem(55)
        center()
        .iconfont
          font-size: px2rem(22)
          color: #666
      .cancel-btn-wrapper
        flex: 0 0 px2rem(55)
        center()
        .cancel-text
          font-size: px2rem(14)
          color: $color-blue
    .shelf-search-tab-wrapper
      position: absolute
      top: px2rem(52)
      left: 0
      z-index: 105
      display: flex
      width: 100%
      height: px2rem(42)
      .shelf-search-tab-item
        flex: 1
        center()
        .shelf-search-tab-text
          font-size: px2rem(12)
          color: #999
          &.is-selected
            color: $color-blue
</style>
